<template>
  <view class="wrap view-container">
    <u-form :model="form" label-width="126px" class="form" ref="form" :rules="rules">
      <u-form-item label="账号" prop="userName" :required="true" label-position="top">
        <div class="form-col-12">
          <u-input
            v-model="form.userName"
            type="text" class="u-input" :clearable="false" />
        </div>
      </u-form-item>
      <u-form-item label="昵称" prop="nickName" :required="true" label-position="top">
        <div class="form-col-12">
          <u-input
            v-model="form.nickName"
            type="text" class="u-input" :clearable="false" />
        </div>
      </u-form-item>
			<u-form-item label="性别" prop="sex" :required="true" label-position="top">
				<div class="form-col-12">
					<u-radio-group v-model="form.sex">
						<u-radio :name="String(1)">男</u-radio>
						<u-radio :name="String(0)">女</u-radio>
					</u-radio-group>
				</div>
			</u-form-item>
      <u-form-item label="年龄" prop="age" :required="true" label-position="top">
        <div class="form-col-12">
          <uni-data-select
            v-model="form.age"
            :localdata="ageList"
            :clear="false"
          ></uni-data-select>
        </div>
      </u-form-item>
      <u-form-item label="手机号" prop="phonenumber" label-position="top">
        <div class="form-col-12">
          <u-input
            v-model="form.phonenumber"
            type="text" class="u-input" :clearable="false" />
        </div>
      </u-form-item>
      <u-form-item label="邮箱" prop="email" label-position="top">
        <div class="form-col-12">
          <u-input
            v-model="form.email"
            type="text" class="u-input" :clearable="false" />
        </div>
      </u-form-item>
      <u-form-item label="注册日期" :required="true" prop="registerTime" label-position="top">
        <div class="form-col-12">
          <uni-datetime-picker
            v-model="form.registerTime"
            type="datetime"
            :clearable="false"
          />
        </div>
      </u-form-item>
      <u-form-item label="格言" prop="motto" label-position="top">
        <div class="form-col-11">
          <u-input
            v-model="form.motto"
            type="textarea" class="u-input" :clearable="false" placeholder="请输入或选择" />
          <u-action-sheet :list="mottoList" v-model="isShowMotto" @click="handleConfirmMotto"></u-action-sheet>
        </div>
        <div class="form-col-1">
          <uni-icons @click="isShowMotto = true" type="search" size="20" color="#999"></uni-icons>
        </div>
      </u-form-item>
      <u-form-item label="照片" label-position="top" class="form-item-image">
        <uni-file-picker
          :value="form.imageList"
          :limit="2" title=""
          file-mediatype="image"
          @select="handleUploadImage"
          @delete="handleDeleteImage"
          :readonly="true"></uni-file-picker>
      </u-form-item>
    </u-form>
    <div class="footer-fixed">
      <u-button @click="handleSubmit" class="btn-submit" type="primary">保存</u-button>
    </div>
  </view>
</template>

<script>
import { strer, dater } from '@daelui/dogjs/dist/components.js'
import uniFiler from '@/components/libs/uni-filer.js'
import { compress } from '@/api/service/imager.js'
import ebus from '@/components/libs/ebus.js'
import userSer from '@/api/system/user.js'

export default {
  data () {
    return {
      isEditDisable: false, // 是否禁用编辑
      isEdit: false, // 是否编辑模式
      form: {
        userName: '',
        nickName: '',
        age: '',
        sex: '',
        phonenumber: '',
        email: '',
        motto: '',
        imageList: []
      },
      rules: {},
      ageList: [], // 年龄
      mottoList: [], // 格言
      isShowMotto: false
    }
  },

  onLoad (params) {
    this.initView(params)
  },

  methods: {
    // 初始化视图
    initView (params) {
      // 取数据
      userSer.queryItem({ id: params.id }).then(res => {
        if (res.code === 200) {
          let data = res.data || res.user
          let images = data.images
          if (images) {
          	data.imageList = images.split(',').map(item => {
          		return {
          			name: item,
          			url: this.vuex_config.baseUrl + item
          		}
          	})
          }
          this.form = data
        }
      })
      // 年龄列表
      let ageList = []
      for (let i = 1; i <= 120; i++) {
        ageList.push({
          value: i,
          text: i
        })
      }
      this.ageList = ageList
    },
    // 上传图片
    handleUploadImage (args) {
      let imageList = [...this.form.imageList]
      this.form.imageList = imageList
      let user = this.getCurrentUser() || {}
      args.tempFilePaths.forEach((path, i) => {
        let node = args.tempFiles[i].file
        // 压缩
        compress({ src: path, quality: 80 }).then((text) => {
          uniFiler.base64ToPath(text).then(path => {
            let image = {
              id: strer.udigit(),
              name: node.name,
              saveName: node.name,
              path: path,
              url: path,
              createUserId: user.userId,
              isInsert: 1
            }
            this.form.imageList.push(image)
          })
        })
      })
    },
    // 删除图片
    handleDeleteImage (args) {
      let node = args.tempFile
      let id = node.id
      // 本地添加的图片直接删除
      this.form.imageList = this.form.imageList.filter(function(item){
        if (String(item.id) === String(id)) {
          // 删除项标记
          item.isDelete = 1
          // 刚添加的则直接删除
          if (item.isInsert) {
            return false
          }
        }
        return true
      })
    },
    // 选择格言
    handleConfirmMotto (index) {
      this.form.motto = this.mottoList[index].text
    },
    // 提交
    handleSubmit () {
      this.$refs.form.rules = this.rules
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }
        this.goBack()
      })
    },
  }
}
</script>

<style lang="less">
.form-item-image /deep/ .u-form-item--left__content__label {
  align-items: center;
  &:after {
    content: "(最多两张)";
    color: #999;
    font-size: 12px;
    line-height: 12px;
  }
}
.footer-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  background: #fff;
  border-top: 1px #ebeef5 solid;
  z-index: 9;
  .btn-submit {
    width: 100%;
  }
}
</style>
